import { useEffect, useRef, useState } from "react";
import { Text, View } from "react-native";
import apiService from "../services/ApiServices";
import { FlashList } from "@shopify/flash-list";
import { StyleSheet } from "react-native";
import FastImage from "react-native-fast-image";
import { __formatNumber, __getThumbUrl } from "../common/utils";
import EmptyView from "./EmptyView";

interface SearchPipeRouteProps {
  searchText: string;
}

const SearchPipeRoute: React.FC<SearchPipeRouteProps> = ({ searchText }) => {
  const [pipeList, setPipeList] = useState<any[]>([]);
  const pageRef = useRef<number>(1);

  useEffect(() => {
    const fetchData = async () => {
      const data = await searchPipe(searchText);
      setPipeList(data.list);
    };
    fetchData();
  }, [searchText]);

  const searchPipe = async (text: string): Promise<any> => {
    const result = await apiService.searchPipeList(text, pageRef.current);
    return result?.data;
  };

  const renderItem = (item: any) => {
    return (
      <View style={styles.contentView}>
        <FastImage
          resizeMode="cover"
          style={styles.coverImage}
          source={{ uri: __getThumbUrl(item.cover, 200) }}
        >
          <FastImage
            source={{ uri: __getThumbUrl(item.cartoonAvatar, 50) }}
            style={styles.cartoonAvatar}
          />
        </FastImage>
        <View style={styles.rightView}>
          <View>
            <Text numberOfLines={1} style={styles.nameLabel}>
              {item.name}
            </Text>
            <Text numberOfLines={3} style={styles.summaryLabel}>
              {item.summary}
            </Text>
          </View>
          <Text style={styles.nicknameLabel}>
            @{item.user.nickname} · {__formatNumber(item.useNum)}互动
          </Text>
        </View>
      </View>
    );
  };

  return (
    <View style={{ flex: 1 }}>
      <FlashList
        data={pipeList}
        renderItem={({ item }) => renderItem(item)}
        keyExtractor={(item) => item.id.toString()}
        estimatedItemSize={150}
        ListEmptyComponent={() => <EmptyView />}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  contentView: {
    height: 150,
    backgroundColor: "white",
    marginHorizontal: 12,
    marginVertical: 8,
    borderRadius: 16,
    elevation: 1,
    shadowColor: "black",
    shadowRadius: 1,
    shadowOpacity: 0.1,
    shadowOffset: { width: 1, height: 1 },
    flexDirection: "row",
    justifyContent: "space-between",
  },
  coverImage: {
    width: 94,
    resizeMode: "cover",
    borderTopLeftRadius: 16,
    borderBottomLeftRadius: 16,
    overflow: "hidden",
  },
  rightView: {
    marginLeft: 10,
    backgroundColor: "white",
    flex: 1,
    justifyContent: "space-between",
    borderRadius: 16,
  },
  nameLabel: {
    marginTop: 10,
    fontSize: 16,
    fontWeight: "bold",
    color: "black",
  },
  summaryLabel: {
    marginTop: 10,
    fontSize: 14,
    color: "rgba(0,0,0,0.6)",
  },
  nicknameLabel: {
    color: "rgba(0,0,0,.3)",
    fontSize: 14,
    marginBottom: 10,
  },
  cartoonAvatar: {
    marginLeft: 4,
    marginTop: 4,
    width: 32,
    height: 32,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: "white",
  },
});

export default SearchPipeRoute;
